/**
 * CheckPanel.jsx
 * 选择城市, 选择区县, 选择学校
 *
 * created by qiuwei
 * version 1.0.0
 * 2016年03月18日
 */

import React from 'react';
import cx from 'classnames';
import * as CheckPanelStyle from './CheckPanel.less';
import { CITY, COUNTY, SCHOOL } from '../../../../constants/area';

export default class CheckPanel extends React.Component {
	static propTypes = {
		name: React.PropTypes.string,
		onSelectCity: React.PropTypes.func,
		onSelectCounty: React.PropTypes.func,
		onSelectSchool: React.PropTypes.func
	};

	state = {
		keyword: ''
	};
	
	constructor(props) {
		super(props);
	};
	
	handleSelected = (item, key) => {
		let { onSelectCity, onSelectCounty, onSelectSchool, onSelectArea } = this.props;

		if (key == 'city')
			onSelectCity && onSelectCity(item);
		else if (key == 'county')
			onSelectCounty && onSelectCounty(item);
		else if (key == 'school')
			onSelectSchool && onSelectSchool(item);
		onSelectArea&&onSelectArea()
	};

	handleSearchInput = (event) => {
		let { school } = this.props;
		let keyword = event.target.value;
		this.setState({ keyword });
	};

	render() {
		
		let { city, county, school, currentSubView } = this.props;
		let { keyword } = this.state;
		//创建city列表
		let cityItems = city.options.map((item, index) => (
			<span key={index} onClick={() => this.handleSelected(item, 'city')} 
				className={cx({'checked':city.selectedItem.enum==item.enum})}>{item.name}</span>
		));
		//创建county列表
		let countyItems = county.options.map((item, index) => (
			<span key={index} onClick={() => this.handleSelected(item, 'county')} 
				className={cx({'checked':county.selectedItem.enum==item.enum})}>{item.name}</span>
		));
		//创建school列表
		let schoolItems = school.options.filter((item) => item.name.includes(keyword)).map((item, index) => (
			<span key={index} onClick={() => this.handleSelected(item, 'school')} 
				className={cx({'checked':school.selectedItem.enum==item.enum})}>{item.name}</span>
		));

		return (
			<div className={CheckPanelStyle.checkPanel}>
				{cityItems.length > 0 && 
				<div className={cx('options', 'city')}>
					{cityItems}
				</div>}
				{([SCHOOL, COUNTY].includes(currentSubView)) && countyItems.length > 0 && 
				<div className={cx('options', 'county')}>
					{countyItems}
				</div>}
				{currentSubView == SCHOOL && 
				<div className={cx('options', 'search')}>
					<div className='text'>
						<span>{`${county.selectedItem.name || school.selectedItem.parentName}`}</span>
						<span>中的学校搜索: </span>
					</div>
					<div className='input'><input type='text' onInput={this.handleSearchInput} /></div>
				</div>}
				{currentSubView == SCHOOL && schoolItems.length > 0 && 
				<div className={cx('options', 'school')}>
					{schoolItems}
				</div>}
			</div>
		);
	}
}


